<!--
 * 饮食 - 今日
 * @Author: John Trump
 * @Date: 2020-07-14 16:54:51
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-14 18:37:53
 * @FilePath: /src/views/dailyfood/index.vue
-->

<template>
  <div>
    <Robot  :robotsay="Rsay"></Robot>
    <!-- 有饮食记录 -->
    <div class="main-content main" v-if="!noRecord">
      <div class="section-wrapper">
        <div class="section">
          <wave :percent="90">
            <div slot="context">1214/3000</div>
            <div slot="unit">千卡</div>
          </wave>
          <div class="desc">
            <img class="icon" src="../../assets/images/icon_fire.png" />
            热量摄入
          </div>
        </div>

        <div class="section">
          <wave :percent="40">
            <div slot="context">114/300</div>
            <div slot="unit">克</div>
          </wave>
          <div class="desc">
            <img class="icon" src="../../assets/images/icon-egg.png" />
            蛋白质摄入
          </div>
        </div>

        <div class="section">
          <wave :percent="50">
            <div slot="context">54/300</div>
            <div slot="unit">克</div>
          </wave>
          <div class="desc">
            <img class="icon" src="../../assets/images/icon_meat.png" />
            脂肪摄入
          </div>
        </div>

        <div class="section">
          <wave :percent="70">
            <div slot="context">84/300</div>
            <div slot="unit">克</div>
          </wave>
          <div class="desc">
            <img class="icon" src="../../assets/images/icon_bread.png" />
            碳水化合物摄入
          </div>
        </div>
      </div>
      <div class="other" @click="jumpto()">
        其他营养摄入情况查看>
      </div>
    </div>
    <!-- 无饮食记录 -->
    <div class="main-content main" v-if="!noRecord">
      <div class="no-record">
        您今日还没有记录饮食，对我说“<span class="name">大林，大林</span
        >”，发起记录吧。
      </div>
    </div>
    <BasicLayout></BasicLayout>
  </div>
</template>

<script>
import Wave from "../../components/Wave";
import Robot from "../../components/Robot";
import BasicLayout from "../../components/BasicLayout";
export default {
  name: "DailyFood",
  data() {
    return {
      Rsay:'需要我时，请说“大林，大林”。'
    };
  },
  computed: {
    /** 无饮食记录 */
    noRecord() {
      return false;
    }
  },
  methods: {
    jumpto() {
      console.log("jumpto");
    }
  },
  components: {
    Wave,
    Robot,
    BasicLayout
  }
};
</script>

<style lang="less" scoped>
.main{
  width:92%;
}
.other {
  text-align: right;
  font-size: 34px;
  font-weight: bold;
  text-decoration: underline;
  color: rgba(225, 231, 245, 1);
  margin-top: 58px;
  &:active {
    opacity: 0.7;
  }
}

.no-record {
  font-size: 50px;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  text-align: left;
}

span.name {
  color: #33CB98;
}

.main-content {
  display: flex;
  flex-direction: column;
  padding: 50px;
  .section-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .icon {
    width: 40px;
    height: 40px;
  }
  .desc {
    font-size: 50px;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    margin-top: 40px;
  }
}
</style>
